<template>
  <view>
    <!-- 导航栏 -->
    <scroll-view scroll-x class="nav-bar bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
      <view class="cu-item" :class="index==TabCur? colorClass : '' " v-for="(item,index) in navList" :key="index"
        @tap="tabSelect(item, index)" :data-id="index" v-show="show">
        {{item.subTitle}}
      </view>
    </scroll-view>

  </view>
</template>
<script>
  export default {
    props: {
      colorClass: {
        type: String,
        default: 'text-cyan cur' // 默认为空
      }
    },
    data() {
      return {
        navList: [],
        TabCur: 0,
        show: false
      };
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.fetchNav();
      },
      // 获取导航栏数据
      async fetchNav() {
        const {
          data: res
        } = await uni.$http.get('/info/illsub')
        if (res.code !== 200) return uni.$showMsg()
        this.navList = res.data;
        // 再调用父组件查询到所有disease信息
        if(this.navList && this.navList.length > 0){
          this.show = true;
          this.$emit('fetchDisease', this.navList[0].basicId);
        }
      },
      tabSelect(item, index) {
        this.TabCur = index;
        this.scrollLeft = (index - 1) * 60;
        this.$emit('fetchDisease', item.basicId)
      }
    },
  }
</script>
<style lang="scss">
</style>